// Styles for scrollbars - only works in some browsers

@scrollbar-width: 11px;

@scrollbar-dark-bg: @color-bg-element-1;
@scrollbar-dark-thumb: @color-bg-element-3;
@scrollbar-dark-thumb-hover: @color-border-highlight;
@scrollbar-dark-corner: fade(@color-bg-element-3, 75%);
@scrollbar-dark-corner-hover: fade(@color-border-highlight, 75%);

@scrollbar-light-bg: @color-bg-element-1;
@scrollbar-light-thumb: @color-bg-element-3;
@scrollbar-light-thumb-hover: @color-border-highlight;
@scrollbar-light-corner: fade(@color-bg-element-3, 75%);
@scrollbar-light-corner-hover: fade(@color-border-highlight, 75%);

/* WEBKIT BROWSERS */

div {
	scrollbar-color: @scrollbar-dark-bg @scrollbar-dark-thumb;
}

div ::-webkit-scrollbar {
	width: @scrollbar-width;
	background: @scrollbar-dark-bg;
}

div ::-webkit-scrollbar-track {
	background: @scrollbar-dark-bg;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}

div ::-webkit-scrollbar-button {
	background: @scrollbar-dark-thumb;
	display: none;
}

div ::-webkit-scrollbar-thumb {
	background: @scrollbar-dark-thumb;
	border-radius: @scrollbar-width / 2;
}

div ::-webkit-scrollbar-thumb:hover {
	background: @scrollbar-dark-thumb-hover;
}

div ::-webkit-scrollbar-thumb:window-inactive {
	background: @scrollbar-dark-thumb;
}

div ::-webkit-scrollbar-corner, div ::-webkit-resizer {
	background: @scrollbar-dark-corner !important;
	border: 0px solid @scrollbar-dark-corner;
	box-shadow: none;
}

div ::-webkit-scrollbar-corner:hover, div ::-webkit-resizer:hover {
	background: @scrollbar-dark-corner-hover !important;
	border: 0px solid @scrollbar-dark-corner;
	box-shadow: none;
}
